<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="format-detection" content="telephone=no"/>
	<meta name= "viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="./css/module.css">
	<link rel="stylesheet" type="text/css" href="./css/reset.css">
	<link rel="stylesheet" type="text/css" href="./js/swiper/dist/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="./css/wx_product.css">
	<script type="text/javascript" src="./js/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="./js/fastclick/fastclick.js"></script>
	<script type="text/javascript" src="./js/flexible.js"></script>
	<script type="text/javascript" src="./js/swiper/dist/js/swiper.jquery.min.js"></script>
</head>
<body>
	<div class="select">
		<div class="bg-wrap">
			<div class="product-wrap">
				<div class="invest product active">定期理财</div>
				<div class="bond product">债权转让</div>
			</div>
		</div>
		<div class="tab-wrap">
			<div class="tab default active">默认</div>
			<div class="tab apr">
				<span>年华收益率</span>
				<i class="default img">
					<div class="top"></div>
					<div class="bottom"></div>
				</i>
			</div>
			<div class="tab time">
				<span>项目期限</span>
				<i class="default img">
					<div class="top"></div>
					<div class="bottom"></div>
				</i>
			</div>
		</div>
	</div>
	<!-- <!-- <div class="no-deta-wrap">
		<div class="no-data">
			<div class="img"></div>
			<div class="text">暂无理财标的</div>
		</div>
	</div> -->
	<!-- <div class="loading-wrap">
		<div class="loadEffect">
	        <span></span>
	        <span></span>
	        <span></span>
	        <span></span>
	        <span></span>
	        <span></span>
	        <span></span>
	        <span></span>
		</div>
		<div class="text">下拉刷新</div>
	</div> -->
	<div class="invest-wrap invest-con swiper-container">
		<div class="swiper-wrapper">
			<div class="invest-module swiper-slide">
				<div class="module-top">
					<div class="tip1">企</div>
					<div class="name">奇艺蓉Q29123232</div>
					<div class="tip2">活动加息</div>
				</div>
				<div class="module-middle">
					<div class="title1">预计年化利率</div>
					<div class="title2">项目期限</div>
					<div class="title3">起投金额 <span>10000</span> 元</div>
				</div>
				<div class="module-bottom">
					<div class="apr">8.0<span>+0.5%</span></div>
					<div class="time">180天</div>
					<div class="button prepare">预购中</div>
				</div>
			</div>
			<div class="invest-module swiper-slide">
				<div class="module-top">
					<div class="tip1">企</div>
					<div class="name">奇艺蓉Q29123232</div>
					<div class="tip2">活动加息</div>
				</div>
				<div class="module-middle">
					<div class="title1">预计年化利率</div>
					<div class="title2">项目期限</div>
					<div class="title3">起投金额 <span>10000</span> 元</div>
				</div>
				<div class="module-bottom">
					<div class="apr">8.0<span>+0.5%</span></div>
					<div class="time">180天</div>
					<div class="button prepare">预购中</div>
				</div>
			</div>
			<div class="invest-module swiper-slide">
				<div class="module-top">
					<div class="tip1">企</div>
					<div class="name">奇艺蓉Q29123232</div>
					<div class="tip2">活动加息</div>
				</div>
				<div class="module-middle">
					<div class="title1">预计年化利率</div>
					<div class="title2">项目期限</div>
					<div class="title3">起投金额 <span>10000</span> 元</div>
				</div>
				<div class="module-bottom">
					<div class="apr">8.0<span>+0.5%</span></div>
					<div class="time">180天</div>
					<div class="button prepare">预购中</div>
				</div>
			</div>
			<div class="invest-module swiper-slide">
				<div class="module-top">
					<div class="tip1">企</div>
					<div class="name">奇艺蓉Q29123232</div>
					<div class="tip2">活动加息</div>
				</div>
				<div class="module-middle">
					<div class="title1">预计年化利率</div>
					<div class="title2">项目期限</div>
					<div class="title3">起投金额 <span>10000</span> 元</div>
				</div>
				<div class="module-bottom">
					<div class="apr">8.0<span>+0.5%</span></div>
					<div class="time">180天</div>
					<div class="button prepare">预购中</div>
				</div>
			</div>
			<!-- <div class="overdue-title">近期满额及往期募集完成的项目</div> -->
			<div class="invest-module overdue swiper-slide">
				<div class="module-top">
					<div class="tip1">企</div>
					<div class="name">奇艺蓉Q29123232</div>
					<div class="tip2">活动加息</div>
				</div>
				<div class="module-middle">
					<div class="title1">预计年化利率</div>
					<div class="title2">项目期限</div>
					<div class="title3">起投金额 <span>10000</span> 元</div>
				</div>
				<div class="module-bottom">
					<div class="apr">8.0<span>+0.5%</span></div>
					<div class="time">180天</div>
					<div class="button over">已售罄</div>
				</div>
			</div>
		</div>
		<div class="swiper-scrollbar"></div>
	</div>
		<div class="invest-wrap bond-con">
		<div class="invest-module">
			<div class="module-top">
				<div class="tip1">企</div>
				<div class="name">奇艺蓉Q29123232</div>
			</div>
			<div class="module-middle">
				<div class="title1">预计年化利率</div>
				<div class="title2">项目期限</div>
				<div class="title3">转让率 <span>0%</span></div>
			</div>
			<div class="module-bottom">
				<div class="apr">8.0<span>+0.5%</span></div>
				<div class="time">180天</div>
				<div class="button prepare">抢购</div>
			</div>
		</div>
		<div class="invest-module">
			<div class="module-top">
				<div class="tip1">企</div>
				<div class="name">奇艺蓉Q29123232</div>
			</div>
			<div class="module-middle">
				<div class="title1">预计年化利率</div>
				<div class="title2">项目期限</div>
				<div class="title3">转让率 <span>0%</span></div>
			</div>
			<div class="module-bottom">
				<div class="apr">8.0<span>+0.5%</span></div>
				<div class="time">180天</div>
				<div class="button prepare">抢购</div>
			</div>
		</div>
		<div class="overdue-title">近期满额及往期募集完成的项目</div>
		<div class="invest-module overdue">
			<div class="module-top">
				<div class="tip1">企</div>
				<div class="name">奇艺蓉Q29123232</div>
			</div>
			<div class="module-middle">
				<div class="title1">预计年化利率</div>
				<div class="title2">项目期限</div>
				<div class="title3">转让率 <span>0%</span></div>
			</div>
			<div class="module-bottom">
				<div class="apr">8.0<span>+0.5%</span></div>
				<div class="time">180天</div>
				<div class="button over">已售罄</div>
			</div>
		</div>
	</div>
	<!-- <div class="footer">
		<div class="home footer-module">
			<div class="normal">
				<div class="img"></div>
				<div class="text">首页</div>
			</div>
		</div>
		<div class="product footer-module">
			<div class="normal">
				<div class="img"></div>
				<div class="text">产品列表</div>
			</div>
		</div>
		<div class="my footer-module">
			<div class="active">
				<div class="img"></div>
				<div class="text">我的</div>
			</div>
		</div>
	</div> -->
</body>
<script type="text/javascript">
	page = 0;
	// 下滑刷新，上滑加载
  	var mySwiper = new Swiper ('.swiper-container', {
  		scrollbar: '.swiper-scrollbar',
	    direction: 'vertical',
	    loop: false,
	    slidesPerView: 'auto',  
        freeMode: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
    	observeParents:true,//修改swiper的父元素时，自动初始化swiper
    	
    	// autoHeight: true, //高度随内容变化
  	})
  	mySwiper.on("TouchEnd", function (swiper) {  
        //下拉加载  
        if (swiper.translate > 50) {  
        	// $('.dropload-up').remove();
          // dropload
		    // $('.invest-wrap').dropload({
		    //     scrollArea : window,
		    //     domUp : {
		    //         domClass   : 'dropload-up',
		    //         domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
		    //         domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
		    //         domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
		    //     },
		    //     domDown : {
		    //         domClass   : 'dropload-down',
		    //         domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
		    //         domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
		    //         domNoData  : '<div class="dropload-noData">暂无数据-自定义内容</div>'
		    //     },
		    //     loadUpFn : function(me){
		            $.ajax({
		                type: 'GET',
		                url: 'json/update.json',
		                dataType: 'json',
		                success: function(data){
		                    var result = '';
		                    for(var i = 0; i < data.lists.length; i++){
		                        result +=   '<a class="item opacity swiper-slide" href="'+data.lists[i].link+'">'
		                                        +'<img src="'+data.lists[i].pic+'" alt="">'
		                                        +'<h3>'+data.lists[i].title+'</h3>'
		                                        +'<span class="date">'+data.lists[i].date+'</span>'
		                                    +'</a>';
		                    }
		                    // 为了测试，延迟1秒加载
		                    setTimeout(function(){
		                        $('.swiper-wrapper').html(result);
		                        // 每次数据加载完，必须重置
		                        mySwiper.update();
		                        // me.resetload();
		                        // console.log(mySwiper.wrapper[0]);
		                        // console.log(mySwiper.height);
		                        // // 重置页数，重新获取loadDownFn的数据
		                        // page = 0;
		                        // // 解锁loadDownFn里锁定的情况
		                        // me.unlock();
		                        // me.noData(false);
		                        // $('.dropload-up').remove();
		                    },1000);
		                },
		                error: function(xhr, type){
		                    alert('Ajax error!');
		                    // 即使加载出错，也得重置
		                    // me.resetload();
		                }
		            })
		        }
		        // loadDownFn : function(me){
		        //     page++;
		        //     // 拼接HTML
		        //     var result = '';
		        //     $.ajax({
		        //         type: 'GET',
		        //         url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+5,
		        //         dataType: 'json',
		        //         success: function(data){
		        //             var arrLen = data.length;
		        //             if(arrLen > 0){
		        //                 for(var i=0; i<arrLen; i++){
		        //                     result +=   '<a class="item opacity" href="'+data[i].link+'">'
		        //                                     +'<img src="'+data[i].pic+'" alt="">'
		        //                                     +'<h3>'+data[i].title+'</h3>'
		        //                                     +'<span class="date">'+data[i].date+'</span>'
		        //                                 +'</a>';
		        //                 }
		        //             // 如果没有数据
		        //             }else{
		        //                 // 锁定
		        //                 me.lock();
		        //                 // 无数据
		        //                 me.noData();
		        //             }
		        //             // 为了测试，延迟1秒加载
		        //             setTimeout(function(){
		        //                 // 插入数据到页面，放到最后面
		        //                 $('.lists').append(result);
		        //                 // 每次数据插入，必须重置
		        //                 me.resetload();
		        //             },1000);
		        //         },
		        //         error: function(xhr, type){
		        //             alert('Ajax error!');
		        //             // 即使加载出错，也得重置
		        //             me.resetload();
		        //         }
		        //     });
		        // },
		        // threshold : 50
		    // });
      //   }  
        //上拉刷新  
        if (swiper.translate < -20) {  
            console.log(swiper.translate);
            //reloadData();  
        }  

    });  
	// // 底部导航
	// $('.footer-module').on('click', function() {
	// 	$(this).find('.normal').removeClass('normal').addClass('active').end().siblings().find('.active').removeClass('active').addClass('normal');
	// })
	// //理财产品切换
	// $('.product').on('click', function() {
	// 	if($(this).hasClass('invest')){
	// 		$('.bond-con').hide();
	// 		$('.invest-con').show();
	// 	}else if($(this).hasClass('bond')){
	// 		$('.invest-con').hide();
	// 		$('.bond-con').show();
	// 	}
	// 	$(this).addClass('active').siblings('.active').removeClass('active');
	// })
	// //tab 切换
	// $('.tab').on('click', function() {
	// 	$(this).siblings('.active').removeClass('active').end().addClass('active');

	// })
	// //年化收益切换
	// $('.apr, .time').on('click', function() {
	// 	if($(this).hasClass('apr')){
	// 		$('.time i').removeClass('up dowm').addClass('default');
	// 	}else if($(this).hasClass('time')){
	// 		$('.apr i').removeClass('up dowm').addClass('default');
	// 	}
	// 	var $status = $(this).find('i');
	// 	if($status.hasClass('default')){
	// 		$status.toggleClass('default up');
	// 	}else if($status.hasClass('up') || $status.hasClass('down')){
	// 		$status.toggleClass('down up');
	// 	}
	// })
</script>
</html>
